(function() {
    var touch1 = document.querySelector("#touched");
    var black = document.querySelector(".black");
    var open = document.querySelector(".opened");
    var opening = false;

    black.addEventListener("click", function() {
        var _ww = document.documentElement.clientWidth;
        var _per = document.querySelector(".per");
        var _out = document.querySelector(".out");
        var pos = touch1.getBoundingClientRect();
        var _left = pos.left;
        var _width = pos.width;
        touch1.style.opacity = '1'
        open.style.transition = "all 0.3s";
        if(opening == true) {
            navClose(open);

            return;
        }

        if(_left < _ww/2) {
            console.log('左边');
            _per.style.left = _width + 15 + "px";
            _out.style.left = _width + 70 + "px";
            open.style.left = 0;
            open.style.width = "150px";
        } else {
            console.log('右边');
            _per.style.left = 150 - _width - 15 - (_per.clientWidth) + "px";
            _out.style.left = 150 - _width - 70 - (_per.clientWidth) + "px";
            open.style.left = -150 + _width + "px";
            open.style.width = "150px";
        }
        opening = true;
    }, false);

    function navClose(open) {
        open.style.overflow = 'hidden';
        open.style.left = 0;
        open.style.width="100%";
/*        setTimeout(function(){
            touch1.style.opacity = '0.5';

        },1000)*/
        opening = false;
    }

    function Touch(moveEle, targetEle) {
        this.moveEle = moveEle;
        this.targetEle = targetEle;
/*        var pos = this.moveEle.getBoundingClientRect();
        this.height = pos.height;
        this.left = pos.left;
        this.top = pos.top;
        this.right = pos.right;*/
        this.wh = document.documentElement.clientWidth;
        this.h = document.documentElement.clientHeight;
    }

    Touch.prototype = {
        constructor: Touch,
        _x: 0,
        _y: 0,
/*        _movex: 0,
        _movey: 0,*/
        _binded: "false",
        newposition: function() {
            var pos = this.moveEle.getBoundingClientRect();
            this.height = pos.height;
            this.left = pos.left;
            this.top = pos.top;
            this.right = pos.right;
        },
        prevent: function(event) {
            event.preventDefault();
        },
        touchs: function(event) {
            /*var _style = this.moveEle.style.cssText;*/
            this.newposition();
            this.moveEle.style.transform = "translate3d(0,0,0)";
            this.moveEle.style.transition ="all 0s";

            var touches = event.targetTouches;
            if(touches.length == 1) {
                var _touch = touches[0];
                this._x = _touch.clientX;
                this._y = _touch.clientY;
                this.moveEle.style.left = this.left + "px";
                this.moveEle.style.top = this.top + "px";
                this.targetEle.removeEventListener("touchmove", this.prevent.bind(this), false);
                if(this._binded == "false") {
                    this.targetEle.addEventListener("touchmove", this.touchm.bind(this), false);
                    this.targetEle.addEventListener("touchend", this.touche.bind(this), false);
                    this._binded = "true";
                }

            }
        },
        touchm: function() {
            this.prevent(event);
            touch1.style.opacity = '1'
            navClose(open);
            var touches = event.targetTouches;
            if(touches.length == 1) {
                var _touch = touches[0];
/*                this._movex = _touch.clientX - this._x;
                this._movey = _touch.clientY - this._y;*/
                this.moveEle.style.left = _touch.clientX - this.height/2 + "px";
                this.moveEle.style.top = _touch.clientY - this.height/2 + "px";
            }
        },
        obind: function() {
            /*var that = this;*/
            this.targetEle.addEventListener("touchstart", this.touchs.bind(this), false);
        },
        touche: function(event) {
            this.newposition();
            this.moveEle.style.transition ="all 0.3s";
            if(this.left > this.wh/2 - this.height/2) {
                this.moveEle.style.transform = "translate3d(" + (this.wh - this.height - this.left)  + "px,0,0)";
            } else {
                if(this.left > 0) {
                    this.moveEle.style.transform = "translate3d(-" + this.left + "px,0,0)"
                } else {
                    this.moveEle.style.left = 0;
                }
            }

            if(this.top < -20) {
                this.moveEle.style.top = -20 + 'px';
            }
            if(this.top > (this.h-this.height/2)) {

                this.moveEle.style.top = (this.h-this.height/2) + 'px';

            }
        }

    }


    var touch2 = new Touch(touch1, black);
    touch2.obind();
})();

